import { useEffect, useRef } from "react"
import * as echarts from "echarts";
import { IData03, num } from "../utils/api";
import { useRank } from "./use-rank";

const legends = ['电动列车操作', '轨道交通自动运维', '车辆机械系统检修', '本课程前导项目1', '本课程前导项目2', '本课程前导项目3', '本课程前导项目4']

function getOption(names: string[]) {
  return {
    // title: {
    //   text: '学生成绩',
    //   left: 230,
    //   top: 0,
    //   textStyle: {
    //     fontSize: 14,
    //     fontWeight: 'normal',
    //     color: '#fff'
    //   }
    // },
    // color: ['pink', 'orange', '#fff', '#91CC75', '#fff066', '#2eee2e', '#4dabe2ede'],
    textStyle: {
      fontSize: 6,
      color: '#79839E'
    },
    legend: {
      data: legends,
      left: 39,
      bottom: 5,
      textStyle: { color: "#fff", fontSize: 9 },
      itemWidth: 15,
      itemHeight: 8,
    },
    grid: {
      top: 10,
    },
    xAxis: {
      type: 'category',
      data: [names[8], names[9], names[10], names[11], names[12]],
      axisTick: { show: false },
      splitLine: { show: true, lineStyle: { color: "#073e78" } },
      axisLine: { show: false },
      axisLabel: { interval: 0, fontSize: 9 },
    },
    yAxis: {
      type: 'value',
      splitLine: { show: true, lineStyle: { color: "#073e78" } },
      axisLabel: {
        fontSize: 9,
        // formatter: (v: number) => v * 100 + "%"
      },
    },
    series: [
      {
        name: legends[0],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'line',
        symbol: "circle",
        symbolSize: 6,
        lineStyle: { width: 1 },
      },
      {
        name: legends[1],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'line',
        symbol: "circle",
        symbolSize: 6,
        lineStyle: { width: 1 },
      },
      {
        name: legends[2],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'line',
        symbol: "circle",
        symbolSize: 6,
        lineStyle: { width: 1 },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            { type: 'min', name: '最小值' }
          ],
        }
      },
      {
        name: legends[3],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'bar',
        barWidth: 6,
      },
      {
        name: legends[4],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'bar',
        barWidth: 6,
      },
      {
        name: legends[5],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'bar',
        barWidth: 6,
      },
      {
        name: legends[6],
        data: [num(100, 55), num(100, 55), num(100, 55), num(100, 55), num(100, 55)],
        type: 'bar',
        barWidth: 6,
      }
    ]
  };
}

function useOption() {
  const students = useRank()
  if (students.length < 9) return null
  const names = students.map(item => item.name)
  return getOption(names)
}

export function useExpectBar() {
  const myChart = useRef<echarts.ECharts>()
  const dom = useRef<any>()
  const option = useOption()

  useEffect(() => {
    if (!option) return
    myChart.current = echarts.init(dom.current)
    myChart.current?.setOption(option)
  }, [option])

  return [dom]
}

